//首页
<template>
    <div class="container">
        <div class="coal-blending-view">
            <div class="coal-blending-header">
                <p class="pull-left coal-blending-header-text-one">配煤概览</p>
                <p class="pull-left  coal-blending-header-text-two"></p>
            </div>
            <div class="flex-2-2-1">
                <div>
                    <p>配煤准确率99.2%</p>
                    <div id="coal-blending-accuracy-rate" class="echart-container"></div>
                </div>
                <div>
                    <p>煤粉碎细度70</p>
                    <div id="coal-blending-mesh" class="echart-container"></div>
                </div>
                <div>
                    <p class="iconfont"><i class="fa fa-warning fa-fw fa-2x"></i></p>
                    <p class="iconfont">56</p>
                </div>
            </div>
        </div>
        <div class="coking-view">
            <div class="coal-blending-header">
                <p class="pull-left coal-blending-header-text-one">焦炼概览</p>
                <p class="pull-left  coal-blending-header-text-two"></p>
            </div>
            <div class="flex-2-2-1">
                <div>
                    <div>
                        <p>K2</p>
                        <div id="coking-k2" class="echart-container"></div>
                    </div>
                    <div>
                        <p>K安</p>
                        <div id="coking-ka" class="echart-container"></div>
                    </div>
                </div>
                <div>
                    <div>
                        <p>K煤</p>
                        <div id="coking-k" class="echart-container"></div>
                    </div>
                    <div>
                        <p>K均</p>
                        <div id="coking-kj" class="echart-container"></div>
                    </div>
                </div>
                <div>
                    <p class="iconfont"><i class="fa fa-home fa-fw fa-2x"></i></p>
                    <p class="iconfont">56</p>
                </div>
            </div>

        </div>
        <div class="dry-out">
            <div class="coal-blending-header">
                <p class="pull-left coal-blending-header-text-one">干熄概览</p>
                <p class="pull-left  coal-blending-header-text-two"></p>
            </div>
            <div class="flex-2-2-1">
                <div>
                    <p>排焦温度179℃</p>
                    <div id="temperature" class="echart-container"></div>
                </div>
                <div>
                    <p>H2含量2%</p>
                    <div id="include-H" class="echart-container"></div>
                </div>
                <div>
                    <p  class="iconfont"><i class="fa fa-home fa-fw fa-2x"></i></p>
                    <p class="iconfont">56</p>
                </div>
            </div>
        </div>
        <div class="chemical-industry">
            <div class="coal-blending-header">
                <p class="pull-left coal-blending-header-text-one">化产概览</p>
                <p class="pull-left  coal-blending-header-text-two"></p>
            </div>
            <div class="flex-2-2-1">
                <div>
                    <p>排焦温度179℃</p>
                    <div id="suction" class="echart-container"></div>
                </div>
                <div>
                    <p>H2含量2%</p>
                    <div id="flow" class="echart-container"></div>
                </div>
                <div>
                    <p class="iconfont"><i class="fa fa-home fa-fw fa-2x"></i></p>
                    <p class="iconfont">56</p>
                </div>
            </div>
        </div>
        <div class="replace"></div>
    </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    name: "firingHome",
    data() {
      return {
        accuracy_rate_x: ['2018/9/1', '2018/9/2', '2018/9/3', '2018/9/4', '2018/9/5', '2018/9/6'],
        accuracy_rate_data: [150, 232, 201, 154, 190, 330, 410],
        blending_mesh_x: ['2018/9/1', '2018/9/2', '2018/9/3', '2018/9/4', '2018/9/5', '2018/9/6'],
        blending_mesh_data: [150, 232, 201, 154, 190, 330, 410],
        coking_k2_x: ['2018/9/1', '2018/9/2', '2018/9/3', '2018/9/4', '2018/9/5', '2018/9/6'],
        coking_k2_data: [150, 232, 201, 154, 190, 330, 410],
        coking_k_x: ['2018/9/1', '2018/9/2', '2018/9/3', '2018/9/4', '2018/9/5', '2018/9/6'],
        coking_k_data: [150, 232, 201, 154, 190, 330, 410],
        coking_ka_x: ['2018/9/1', '2018/9/2', '2018/9/3', '2018/9/4', '2018/9/5', '2018/9/6'],
        coking_ka_data: [150, 232, 201, 154, 190, 330, 410],
        coking_kj_x: ['2018/9/1', '2018/9/2', '2018/9/3', '2018/9/4', '2018/9/5', '2018/9/6'],
        coking_kj_data: [150, 232, 201, 154, 190, 330, 410],
        temperature_x: ['2018/9/1', '2018/9/2', '2018/9/3', '2018/9/4', '2018/9/5', '2018/9/6'],
        temperature_data: [150, 232, 201, 154, 190, 330, 410],
        include_H_x: ['2018/9/1', '2018/9/2', '2018/9/3', '2018/9/4', '2018/9/5', '2018/9/6'],
        include_H_data: [150, 232, 201, 154, 190, 330, 410],
        flow_x: ['2018/9/1', '2018/9/2', '2018/9/3', '2018/9/4', '2018/9/5', '2018/9/6'],
        flow_data: [150, 232, 201, 154, 190, 330, 410],
        suction_x: ['2018/9/1', '2018/9/2', '2018/9/3', '2018/9/4', '2018/9/5', '2018/9/6'],
        suction_data: [150, 232, 201, 154, 190, 330, 410],
      };
    },
    mounted() {
      this.$nextTick(() => {
        const myChart_accuracy_rate = echarts.init(document.getElementById("coal-blending-accuracy-rate"));
        const myChart_blending_mesh = echarts.init(document.getElementById("coal-blending-mesh"));
        const myChart_coking_k2 = echarts.init(document.getElementById("coking-k2"));
        const myChart_coking_k = echarts.init(document.getElementById("coking-k"));
        const myChart_coking_ka = echarts.init(document.getElementById("coking-ka"));
        const myChart_coking_kj = echarts.init(document.getElementById("coking-kj"));
        const mycChart_temperature = echarts.init(document.getElementById("temperature"));
        const myChart_include_H = echarts.init(document.getElementById("include-H"));
        const myChart_flow = echarts.init(document.getElementById("flow"));
        const myChart_suction = echarts.init(document.getElementById("suction"));
        const option_flow = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.flow_x,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          series: [

            {
              name: 'K安',
              type: 'line',
              stack: '总量',
              data: this.flow_data
            },


          ]
        };
        const option_suction = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.suction_x,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          series: [

            {
              name: 'K安',
              type: 'line',
              stack: '总量',
              data: this.suction_data
            },


          ]
        }
        const option_temperature = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.temperature_x,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          series: [

            {
              name: 'K安',
              type: 'line',
              stack: '总量',
              data: this.temperature_data
            },


          ]
        };
        const option_include_H = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.include_H_x,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          series: [

            {
              name: 'K安',
              type: 'line',
              stack: '总量',
              data: this.include_H_data
            },


          ]
        };
        const option_coking_ka = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.coking_ka_x,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          series: [

            {
              name: 'K安',
              type: 'line',
              stack: '总量',
              data: this.coking_ka_data
            },


          ]
        }
        const option_coking_kj = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.coking_kj_x,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          series: [

            {
              name: 'K均',
              type: 'line',
              stack: '总量',
              data: this.coking_kj_data
            },


          ]
        }
        const option_coking_k = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.coking_k_x,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          series: [

            {
              name: 'K煤',
              type: 'line',
              stack: '总量',
              data: this.coking_k_data
            },


          ]
        }
        const option_coking_k2 = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.coking_h2_x,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          series: [

            {
              name: 'K2',
              type: 'line',
              stack: '总量',
              data: this.coking_k2_data
            },


          ]
        }
        const option_blending_mesh = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.accuracy_rate_x,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          series: [

            {
              name: 'K1',
              type: 'line',
              stack: '总量',
              data: this.accuracy_rate_data
            },


          ]
        }
        const option_accuracy_rate = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.accuracy_rate_x,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          series: [

            {
              name: 'K1',
              type: 'line',
              stack: '总量',
              data: this.accuracy_rate_data
            },


          ]

        };
        myChart_accuracy_rate.setOption(option_accuracy_rate);
        myChart_blending_mesh.setOption(option_blending_mesh);
        myChart_coking_k.setOption(option_coking_k);
        myChart_coking_k2.setOption(option_coking_k2);
        myChart_coking_ka.setOption(option_coking_ka);
        myChart_coking_kj.setOption(option_coking_kj);
        mycChart_temperature.setOption(option_temperature);
        myChart_include_H.setOption(option_include_H);
        myChart_flow.setOption(option_flow);
        myChart_suction.setOption(option_suction);

      })
    }
  };
</script>

<style lang="scss">
    * {
        margin: 0;
        padding: 0;
    }

    .coal-blending-view, .coking-view {
        width: 100%;
    }

    .coking-view {
        margin-top: 10px;
    }

    .pull-left {
        float: left;
    }

    .coal-blending-header {
        overflow: hidden;
        height: 40px;
    }

    .coal-blending-header-text-one {
        width: 20%;
        height: 40px;
        line-height: 40px;
    }

    .coal-blending-header-text-two {
        width: 80%;
        height: 1px;
        background: #000;
        margin-top: 19.5px;
    }

    .coal-blending-content {
        overflow: hidden;
        display: flex;
    }

    .table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        overflow-x: scroll;
    }

    .flex-2-2-1 {
        display: flex;
        align-items: center;
        -webkit-align-items: center;
        & > div {
            flex: 2;
        }
        div:nth-child(3) {
            flex: 1;
        }
    }

    .echart-container {
        height: 70px;
        box-shadow: 5px 5px 2px #888888;
    }
    .iconfont{
        width: 100%;
        text-align: center;
        color: red;
    }
    .replace{
        width: 100vw;
        height: 28px;
    }
</style>
